<!doctype html>
<html>
	<head>
		<title>标题</title>
		<meta charset="utf-8">
		<style>
			img:hover{
				/*1、旋转720deg*/
				transform:rotate(720deg);
				/*2、设置过渡效果*/
				transition:transform 1s linear;
			}

			#clock{
				width:400px;
				height:400px;
				border:6px solid #369;
				border-radius:50%;
				position:relative;
			}
			#minute{
				width:10px;
				height:100px;
				background:#963;
				position:absolute;
				top:100px;
				left:195px;
				/*转换原点*/
				transform-origin:center bottom;
				/*调用动画*/
				animation:scroll 3600s linear infinite;
			}
			#second{
				width:6px;
				height:150px;
				background:#639;
				position:absolute;
				top:50px;
				left:197px;
				/*更改转换原点*/
				transform-origin:bottom center;
				/*调用动画*/
				animation:scroll 60s linear infinite;
			}


			/*声明动画*/
			@keyframes scroll{
				0%{
					transform:rotate(0deg);
				}
				100%{
					transform:rotate(360deg);
				}
			}
		</style>
	</head>
	<body>
		<img src="Images/star.jpg">
		<div id="clock">
			<div id="minute"></div>
			<div id="second"></div>
		</div>
	</body>
</html>